<template>
  <div class="swiper">
    <el-carousel trigger="click" height="265px">
      <el-carousel-item v-for="item in swiperList" @click.native="goDetail(item.id)">
        <img class="c-images" :src="item.url" alt width="100%" />
        <p class="c-title">{{item.title}}</p>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";

export default {
  data() {
    return {
      swiperList: [],
    };
  },
  mounted() {
    this.getMenulist();
    var mySwiper = new Swiper(".swiper1", {
      autoplay: 2500,
      speed: 300,
      loop: true,
      onClick: function (swiper) {
        // alert("你点了Swiper");
      },
    });
  },
  methods: {
    //首页接口
    getMenulist() {
      this.$axios
        .get("TCM/GetFirstPage")
        .then((res) => {
          if (res.status == 200) {
            this.swiperList = res.data.dturl;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    goDetail(id) {
      this.addCount(id, "newActivityDetail", "1");
    },
    // 增加点击量接口
    addCount(id, url, type) {
      let queryData = {
        type,
        id,
      };
      this.$axios
        .post("UpdTCM/addcount", queryData)
        .then((res) => {
          if (res.status == 200) {
            this.$router.push({ path: `/${url}/${id}` });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.c-images {
  width: 100%;
  height: 100%;
}

.c-title {
  color: azure;
  width: 100%;
  text-indent: 20px; /*首行缩进20个像素*/
  height: 30px;
  line-height: 30px;
  position: absolute;
  bottom: -12px;
  font-weight: 500;
  background-color: rgba(0, 0, 0, 0.5); /*透明效果*/
  font-size: 14px;
  overflow: hidden;
}
</style>

<style lang="less" >
.el-carousel__button {
  display: none;
}
</style>